<template>
    <div class="bubble">
        <TresCanvas v-bind="tcConfig" style="position: relative;height: auto;width: 100%;">
            <TresPerspectiveCamera :position="[0, 20, 30]" :fov="45" :near="0.1" :far="1000" />
            <OrbitControls v-bind="controlsState" />
            <TresAmbientLight :intensity="2" />
            <Bubble v-bind="pcssConfig" />
        </TresCanvas>
    </div>
</template>

<script setup lang="ts">
import * as THREE from 'three'
import { ref, watch, reactive } from 'vue'
import { OrbitControls } from '@tresjs/cientos'
import { TresCanvas, } from '@tresjs/core'
import Bubble from './bubble.vue'

const dLight = ref(null)
watch(dLight, (newVal: any) => {
    if (newVal) {
        newVal.shadow.camera = new THREE.OrthographicCamera(-8.5, 8.5, 8.5, -8.5, 0.1, 20)
    }
})
const controlsState = reactive({
    enableDamping: true,
    enableZoom: true,
    autoRotate: true,
    enablePan: true,
    enableRotate: true,
    makeDefault: true,
})
const tcConfig = {
    clearColor: '#000000',
    windowSize: true,
    toneMapping: THREE.ACESFilmicToneMapping,
    toneMappingExposure: 0.8,
    shadows: true,
}

const pcssConfig = reactive({
    opacity: 0.5,
})


</script>
<style>
.bubble {
    width: 100%;
    height: 100%;
    position: relative;

}
</style>